<template>
  <view class="warranty">
    <view class="warranty-box">
      <rich-text
        @itemclick="richTextOperate"
        class="rich-text-content"
        :nodes="content"
      ></rich-text>
      <view class="serial-number">请选择省市</view>
      <view class="region">
        <view class="province">
          <picker
            @change="provinceChange"
            range-key="name"
            :value="id"
            :range="provinceArr"
          >
            <view class="picker-box" @click="provinceIsUp = false">
              <input type="text" v-model="provinceVal" placeholder="请选择省" />
              <u-icon
                :name="provinceIsUp ? 'arrow-down' : 'arrow-up'"
                color="#666666"
                size="28"
              ></u-icon>
            </view>
          </picker>
        </view>
        <view class="city">
          <picker
            @change="cityChange"
            range-key="name"
            :value="id"
            :range="cityArr"
          >
            <view class="picker-box" @click="cityIsUp = false">
              <input type="text" v-model="cityVal" placeholder="请选择市" />
              <u-icon
                :name="cityIsUp ? 'arrow-down' : 'arrow-up'"
                color="#666666"
                size="28"
              ></u-icon>
            </view>
          </picker>
        </view>
      </view>
      <map
        style="height: 600rpx; margin-top: 24rpx; width: 100%"
        :latitude="latitude"
        :longitude="longitude"
        :markers="covers"
        :scale="18"
        :include-points="points"
      >
      </map>
      <view class="shop-list" v-if="covers != false">
        <block v-for="(item, index) in covers" :key="index">
          <view
            class="shop-item"
            @click="onLocation(item)"
            v-if="!item.isPosition"
          >
            <view class="number">{{ index + 1 }}</view>
            <view class="content">
              <view class="name">{{ item.name }}</view>
              <view class="address">{{ item.address }}</view>
            </view>
            <view class="distance">距离：{{ item.distance }}</view>
          </view>
        </block>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      content:
        '<p style="margin-top: 0px; margin-bottom: 0px; text-rendering: optimizelegibility; font-feature-settings: ">1.<span style="font-family: PingFangSC-Regular, ">该商品需缴纳<\/span>9.1%<span style="font-family: PingFangSC-Regular, ">的跨境电商综合税，全球探物平台（天津天乐国际贸易有限公司）代收代缴，<\/span>税费以提交订单时的金额为准。<\/p>',
      cityIsUp: true,
      provinceIsUp: true,
      id: 0, // 使用 marker点击事件 需要填写id
      title: "map",
      latitude: "39.908823",
      longitude: "116.39747",
      // latitude: "",
      // longitude: "",
      iconPath: "/static/jifen/location.png",
      covers: [],
      provinceVal: "", // 省
      cityVal: "", // 市
      points: [],
      pointss: [],
      provinceArr: [
        { name: "北京", id: 0 },
        { name: "广东", id: 1 },
        { name: "四川", id: 2 },
        { name: "上海", id: 3 },
        { name: "天津", id: 4 },
        { name: "黑龙江", id: 5 },
        { name: "新疆维吾尔自治区", id: 6 },
      ],
      cityArr: [
        { name: "北京", id: 0 },
        { name: "广州", id: 1 },
        { name: "成都", id: 2 },
        { name: "上海", id: 3 },
        { name: "天津", id: 4 },
        { name: "哈尔滨", id: 5 },
        { name: "乌鲁木齐", id: 6 },
      ],
      coversArr: [
        {
          covers: [
            {
              latitude: 39.896023,
              longitude: 116.321634,
              name: "全聚德烤鸭店(西客站店",
              address: "天津市河西区大沽南路与围堤道交汇处",
              distance: "",
            },
            {
              latitude: 39.865395,
              longitude: 116.431499,
              name: "北京全聚德(方庄店)",
              address: "北京市丰台区莲花池东路118号北京西站F2",
              distance: "",
            },
          ],
        },
        {
          covers: [
            {
              latitude: 23.115718,
              longitude: 113.275089,
              name: "银记肠粉(上九路店)",
              address: "天津市河西区大沽南路与围堤道交汇处",
              distance: "",
            },
            {
              latitude: 23.12272,
              longitude: 113.352199,
              name: "银记肠粉(文明路店)",
              address: "天津市河西区大沽南路与围堤道交汇处",
              distance: "",
            },
          ],
        },
        {
          covers: [
            {
              latitude: 30.640683,
              longitude: 104.087425,
              name: "九眼桥酒吧街",
              address: "天津市河西区大沽南路与围堤道交汇处",
              distance: "",
            },
            {
              latitude: 30.648102,
              longitude: 104.025583,
              name: "MladyHouse雷丁诰斯酒吧",
              address: "天津市河西区大沽南路与围堤道交汇处",
              distance: "",
            },
          ],
        },
        {
          covers: [
            {
              latitude: 31.22727,
              longitude: 121.481301,
              name: "柏斯琴行(金陵店)",
              address: "天津市河西区大沽南路与围堤道交汇处",
              distance: "",
            },
            {
              latitude: 31.212494,
              longitude: 121.4547,
              name: "丽声琴行(汾阳路店)",
              address: "天津市河西区大沽南路与围堤道交汇处",
              distance: "",
            },
          ],
        },
        {
          covers: [
            {
              latitude: 39.095957,
              longitude: 117.17451,
              name: "狗不理(水上北路旗舰店)",
              address: "天津市河西区大沽南路与围堤道交汇处",
              distance: "",
            },
            {
              latitude: 39.141558,
              longitude: 117.193168,
              name: "狗不理(古文化街店)",
              address: "天津市河西区大沽南路与围堤道交汇处",
              distance: "",
            },
          ],
        },
        {
          covers: [
            {
              latitude: 45.540558,
              longitude: 126.972641,
              name: "喜相聚烧烤(金城店)",
              address: "天津市河西区大沽南路与围堤道交汇处",
              distance: "",
            },
            {
              latitude: 45.756842,
              longitude: 126.673173,
              name: "迎宾烧烤(平公店)",
              address: "天津市河西区大沽南路与围堤道交汇处",
              distance: "",
            },
          ],
        },
        {
          covers: [
            {
              latitude: 43.737419,
              longitude: 87.588048,
              name: "胜宝葡萄干批发",
              address: "天津市河西区大沽南路与围堤道交汇处",
              distance: "",
            },
            {
              latitude: 43.824874,
              longitude: 87.601478,
              name: "顺发干鲜果批发中心",
              address: "天津市河西区大沽南路与围堤道交汇处",
              distance: "",
            },
          ],
        },
      ],
      province: "",
      city: "",
      to: "",
      isgetlocat: false,
      mapContext: "",
    };
  },
  mounted() {
    let getlocal = setInterval(() => {
      this.getLocationByqqMap();
      if (this.isgetlocat == true) {
        // 设置一个停止的标志变量
        clearInterval(getlocal);
      }
    }, 500);
  },
  created() {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src =
      "https://mapapi.qq.com/web/mapComponents/geoLocation/v/geolocation.min.js";
    document.getElementsByTagName("head")[0].appendChild(script);
  },
  async onLoad() {
    this.content = this.content
      .replace(/\<img/gi, '<img style="max-width:100%;height:auto"')
      .replace(/\<a/gi, '<a style="color: #2d8cf0;text-decoration: underline"');
    // this.getLocationOnce()
  },
  methods: {
    getLocationByqqMap() {
      //调用定位
      let geolocation = new qq.maps.Geolocation(
        "APKBZ-RZXEK-HFWJV-ABMSG-TNJBK-HEBM4",
        "myapp"
      );
      geolocation.getLocation(this.showPosition, this.showErr, {
        timeout: 2000,
      });
    },
    showPosition(res) {
      //成功的回调
      let that = this;
      if (res.module == "geolocation") {
        that.covers = [
          {
            latitude: res.lat,
            longitude: res.lng,
            iconPath: that.iconPath,
            isPosition: true,
          },
        ];
        that.isgetlocat = true;
        that.latitude = res.lat;
        that.longitude = res.lng;
        // 存储坐标
        that.to = res.lat + "," + res.lng;
        console.log("当前位置的经度：" + res.lng);
        console.log("当前位置的纬度：" + res.lat);
      }
      // console.log(res)
    },
    showErr() {
      //显示错误
      console.log("err");
    },
    onLocation(item) {
      this.latitude = "";
      this.longitude = "";
      setTimeout(() => {
        this.latitude = item.latitude;
        this.longitude = item.longitude;
      });
    },
    // getLocationOnce() {
    //   let that = this;
    //   uni.getLocation({
    //     type: "gcj02",
    //     success: function (res) {
    //       that.latitude = res.latitude;
    //       that.longitude = res.longitude;
    //       // 存储坐标
    //       that.to = res.latitude + "," + res.longitude;
    //       //   that.points[0].latitude = res.latitude;
    //       //   that.points[0].longitude = res.longitude;
    //       console.log("当前位置的经度：" + res.longitude);
    //       console.log("当前位置的纬度：" + res.latitude);
    //     },
    //     fail: function (err) {
    //       console.log(err, "失败");
    //     },
    //   });
    // },
    provinceChange(e) {
      let id = e.detail.value;
      this.provinceVal = this.provinceArr[id].name;
      console.log(id, "省");
      this.provinceIsUp = true;
    },
    async cityChange(e) {
      let id = e.detail.value;
      this.cityVal = this.cityArr[id].name;
      console.log(id, "市");
      this.covers = this.coversArr[id].covers;
      this.cityIsUp = true;

      this.latitude = this.covers[0].latitude;
      this.longitude = this.covers[0].longitude;

      this.covers.forEach(async (item) => {
        // this.points.push({
        //   latitude:item.latitude,
        //   longitude:item.longitude
        // })
        item.iconPath = this.iconPath;
        item.distance = await this.getMatrix(
          item.latitude + "," + item.longitude
        );
      });
    },
    getMatrix(from) {
      let url = "https://apis.map.qq.com/ws/distance/v1/matrix";
      return this.$jsonp(url, {
        mode: "driving",
        from: this.to, //你当前位置坐标
        to: from, // 目的地坐标
        key: "APKBZ-RZXEK-HFWJV-ABMSG-TNJBK-HEBM4", //获取key
        output: "jsonp",
      })
        .then((res) => {
          let hw = res.result.rows[0].elements[0].distance; //拿到距离(米)
          if (hw && hw !== -1) {
            if (hw < 1000) {
              return (hw = hw + "m");
            }
            //转换成公里
            else {
              return (hw = (hw / 2 / 500).toFixed(2) + "km");
            }
          } else {
            return (hw = "距离太近或请刷新重试");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    richTextOperate(event) {
      // 判断类型
      const eleType = event.target.node.name;
      switch (eleType) {
        case "a":
          const href = event.target.node.attrs.href || "";
          if (!href) {
            return;
          }
          this.navigate(href);
          break;
        default:
      }
    },
    /**
     * 跳转
     */
    navigate(href) {
      //事件：点击富文本里的链接
      // #ifdef H5
      window.location = href; //H5或者用window.open吧
      //跳转外链只能h5，公众号可以实现，小程序不支持跳转外链
      // #endif
    },
  },
};
</script>

<style scoped lang="scss">
.warranty {
  padding: 24rpx;

  .warranty-box {
    padding: 24rpx;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
    background: #ffffff;

    .serial-number {
      margin-top: 30rpx;
      font-size: 26rpx;
      font-weight: 600;
    }
    .region {
      margin-top: 10rpx;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .picker-box {
        width: 316rpx;
        border: 1rpx #dddddd solid;
        height: 60rpx;
        border-radius: 5rpx;
        padding: 0 20rpx;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;

        input {
          flex: 1;
          pointer-events: none;
          font-size: 24rpx;
        }
      }
    }

    .shop-list {
      .shop-item {
        padding: 24rpx 0;
        box-sizing: border-box;
        border-bottom: 1rpx #dddddd solid;
        display: flex;
        align-items: center;

        .number {
          font-size: 32rpx;
          color: coral;
          font-weight: bold;
          width: 60rpx;
          box-sizing: border-box;
          padding-right: 10rpx;
          text-align: center;
        }

        .content {
          flex: 1;
          padding-right: 24rpx;
          box-sizing: border-box;

          .name {
            font-size: 30rpx;
            color: #000000;
            font-weight: bold;
          }

          .address {
            margin-top: 10rpx;
            font-size: 22rpx;
            color: #bbbbbb;
          }
        }

        .distance {
          align-self: baseline;
          margin-top: 5rpx;
          font-size: 20rpx;
          color: #aaaaaa;
        }
      }
    }
  }
}
</style>
